<template>
  <Content title="开料计划单">
    <view class="device-details">
      <view class="content">
        <template v-if="model.plan1 && model.plan1.length > 0">
          <MyTable :columns="plan1Columns1" :dataSource="model.plan1" />
          <div class="text">
            <div class="text-item">
              卷料料宽: {{ model.rollMaterialWidthSum }}
            </div>
            <div class="text-item">卷重合计: {{ model.weightSum }}</div>
          </div>
        </template>
        <template v-else>
          <view class="info-box">
            <Empty />
          </view>
        </template>
      </view>

      <view class="content">
        <template v-if="model.plan2 && model.plan2.length > 0">
          <MyTable :columns="plan1Columns2" :dataSource="model.plan2" />
          <div class="text">
            <div class="text-item">料宽合计: {{ model.materialWidthSum }}</div>
            <div class="text-item">利用率: {{ model.rate }}</div>
          </div>
        </template>
        <template v-else>
          <view class="info-box">
            <Empty />
          </view>
        </template>
      </view>
    </view>
  </Content>
</template>

<script>
import Content from "@/components/content/index";
import fetch from "@/utils/fetch";
import Empty from "@/components/empty";
import { getPageData } from "@/store/user";
import MyTable from "@/components/myTable.vue";
export default {
  components: {
    Content,
    MyTable,
    Empty,
  },
  data() {
    return {
      model: {
        materialWidthSum: 0,
        rate: 0,
        rollMaterialWidthSum: 0,
        weightSum: 0,
        plan1: [],
        plan2: [],
      },
      plan1Columns1: [
        {
          title: "卷号",
          key: "rollNumber",
        },
        {
          title: "卷重(kg)",
          key: "rollWeight",
        },
        {
          title: "卷料料宽",
          key: "rollMaterialWidth",
        },
      ],
      plan1Columns2: [
        {
          title: "条料用途",
          key: "useTo",
        },
        {
          title: "材料牌号",
          key: "materialMark",
        },
        {
          title: "条数",
          key: "itemNum",
        },
        {
          title: "条料料宽",
          key: "materialWidth",
        },
        {
          title: "客户名称",
          key: "custom",
        },
        {
          title: "标识牌号",
          key: "identifyMark",
        },
        {
          title: "备注",
          key: "remarks",
        },
      ],
      search: {
        cuttingPlanCode: "",
      },
      navIndex: 0,
      id: "",
      show: false,
      modalTitle: "",
      radioGroup: "",
      materialCode: "",
      scroll: false,
      scrollNoData: false,
      obj: {},
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.search.cuttingPlanCode = option.cuttingPlanCode;
  },
  onShow: function () {},
  onReady: function () {
    this.getList();
  },
  computed: {},
  mounted() {},
  methods: {
    onRefresh() {
      this.getList(true);
    },
    ok() {},
    getList(arg) {
      const that = this;
      that.$loading.open();
      if (arg) {
        that.model = {};
      }
      let obj = {};
      for (const key in that.search) {
        if (Object.hasOwnProperty.call(that.search, key)) {
          const element = that.search[key];
          if (element) obj[key] = element;
        }
      }
      return fetch(
        "get",
        "/dms/materialCuttingPlan/selectCuttingPlan",
        obj
      ).then(({ data }) => {
        that.model = data;
        that.$loading.close();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.device-details {
  background-color: #fff;
  height: 100%;
  overflow: auto;
  .content {
    margin-bottom: 20px;

    .text {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
      .text-item {
        margin-right: 20px;
      }
    }
  }
  .header {
    font-weight: 600;
    margin-bottom: 20rpx;
    padding: 0 40rpx;
  }
  .header-box {
    padding: 5px 10px 5px;
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }

  .title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    padding: 0 40rpx 20rpx 40rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;

    .txt {
      flex: 1;
    }

    .tag-box {
      display: flex;
      align-items: center;
    }
  }

  .content-top {
    padding: 40rpx;

    .state {
      color: #f17a0a;
      margin-bottom: 20rpx;
    }
  }

  .text-box {
    display: flex;
    margin-bottom: 20rpx;

    .label {
      color: #666;
    }
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .label {
      margin: 0 20rpx;
    }
  }

  .number-davities-box {
    text-align: center;
    .header {
      margin-bottom: 20rpx;
    }
    .item-box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
  }
  .btn-box {
    display: flex;
    .btn-box-item {
      padding: 20rpx;
      flex: 1;
      text-align: center;
      border-top: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      color: #67aee7;
    }
  }
}
</style>
